<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>西安8路公交路线图</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f4f4f9;
            color: #333;
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        #input-section {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

        input {
            padding: 10px;
            margin: 5px;
            border: 1px solid #bdc3c7;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: border-color 0.3s ease;
        }

        input:focus {
            border-color: #3498db;
            outline: none;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
        }

        #route-map {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .station-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 10px;
            width: 50px;
            transition: transform 0.3s ease;
        }

        .station-container:hover {
            transform: translateY(-5px);
        }

        .station-wrapper {
            display: flex;
            align-items: center;
            height: 20px;
        }

        .station {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #2ecc71;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        .station.selected {
            background-color: #e74c3c;
        }

        .station-name {
            margin-top: 5px;
            text-align: center;
            font-size: 0.9em;
        }

        .route {
            width: 30px;
            height: 2px;
            margin-top: 10px;
            background-color: #7f8c8d;
            border-radius: 2px;
        }
    </style>
</head>

<body>
    <h1>西安8路公交路线图</h1>
    <div id="input-section">
        <input type="text" id="start-station-input" placeholder="输入起点站点" />
        <input type="text" id="end-station-input" placeholder="输入终点站点" />
        <button onclick="findRoute()">查找路线</button>
    </div>
    <div id="route-map"></div>

    <script>
        const stations = [
            "红庙坡",
            "纸坊村",
            "北关",
            "北门",
            "北大街",
            "钟楼",
            "端履门",
            "大差市",
            "和平门",
            "建东街",
            "李家村",
            "鲁家村",
            "太乙路",
            "交大商场",
            "沙坡",
            "青龙寺",
            "铁设院",
            "千户村",
            "延兴门",
            "经二路",
            "公园南路北口",
            "长乐公园",
            "韩森寨",
            "万寿路",
            "康乐路",
            "纬什街",
            "等驾坡"
        ];

        const routeMap = document.getElementById("route-map");
        const startInput = document.getElementById("start-station-input");
        const endInput = document.getElementById("end-station-input");

        function createRouteMap() {
            stations.forEach((station, index) => {
                const stationContainer = document.createElement("div");
                stationContainer.classList.add("station-container");

                const stationWrapper = document.createElement("div");
                stationWrapper.classList.add("station-wrapper");

                const stationDiv = document.createElement("div");
                stationDiv.classList.add("station");
                stationDiv.dataset.station = station;
                stationDiv.addEventListener("click", () => selectStation(station));
                stationWrapper.appendChild(stationDiv);

                stationContainer.appendChild(stationWrapper);

                const stationName = document.createElement("span");
                stationName.classList.add("station-name");
                stationName.textContent = station;
                stationContainer.appendChild(stationName);

                routeMap.appendChild(stationContainer);

                if (index < stations.length - 1) {
                    const routeDiv = document.createElement("div");
                    routeDiv.classList.add("route");
                    routeMap.appendChild(routeDiv);
                }
            });
        }

        function selectStation(station) {
            if (startInput.value === station) {
                startInput.value = "";
            } else if (endInput.value === station) {
                endInput.value = "";
            } else if (!startInput.value) {
                startInput.value = station;
            } else if (!endInput.value) {
                endInput.value = station;
            } else {
                startInput.value = station;
                endInput.value = "";
            }
        }

        function findRoute() {
            const start = startInput.value;
            const end = endInput.value;
            const startIndex = stations.indexOf(start);
            const endIndex = stations.indexOf(end);

            if (startIndex === -1 || endIndex === -1) {
                alert("请输入有效的起点和终点站点");
                return;
            }

            const allStations = document.querySelectorAll(".station");
            allStations.forEach((station) => {
                station.classList.remove("selected");
            });

            const minIndex = Math.min(startIndex, endIndex);
            const maxIndex = Math.max(startIndex, endIndex);

            for (let i = minIndex; i <= maxIndex; i++) {
                const station = document.querySelector(
                    `.station[data-station="${stations[i]}"]`
                );
                station.classList.add("selected");
            }
        }

        createRouteMap();
    </script>
</body>

</html>